<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">

<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 网站标题 -->
    <title> 写文章 </title>
    {% load static %}
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!-- 引入vuejs -->
    <script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
</head>

<body>
<div id="app">
    <!-- 定义导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <!-- 导航栏商标 -->
            <div>
                <a class="navbar-brand" href="{% url 'home:index' %}">个人博客</a>
            </div>
        </div>
        <!--登录/个人中心-->
        <div class="navbar-collapse">
            <ul class="nav navbar-nav">
                <!-- 如果用户已经登录，则显示用户名下拉框 -->
                <li class="nav-item dropdown" v-if="is_login">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="show_menu_click">[[username]]</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block"
                         v-show="show_menu">
                        <a class="dropdown-item" href="{% url 'users:writeblog' %}">写文章</a>
                        <a class="dropdown-item" href='{% url 'users:center' %}'>个人信息</a>
                        <a class="dropdown-item" href='{% url 'users:center' %}'>退出登录</a>
                    </div>
                </li>
                <!-- 如果用户未登录，则显示登录按钮 -->
                <li class="nav-item" v-else>
                    <a class="nav-link" href="{% url 'users:login' %}">登录</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 写文章表单 -->
    <div class="container" style="margin-bottom: 20px">
        <div class="row">
            <div class="col-12">
                <br>
                <!-- 提交文章的表单 -->
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <!-- 文章标题图 -->
                    <div class="form-group">
                        <label for="avatar">标题图</label>
                        <input type="file" class="form-control-file" name="avatar" id="avatar">
                    </div>

                    <!-- 文章标题 -->
                    <div class="form-group">
                        <!-- 标签 -->
                        <label for="title">文章标题</label>
                        <!-- 文本框 -->
                        <input type="text" class="form-control" id="title" name="title">
                    </div>

                    <!-- 文章栏目 -->
                    <div class="form-group">
                        <label for="category">栏目</label>
                        <select class="form-control col-3" id="category" name="category">
                            {% for category in categories %}
                                <option value="{{ category.id }}">{{ category.title }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- 文章标签 -->
                    <div class="form-group">
                        <!-- 标签 -->
                        <label for="tags">标签</label>
                        <!-- 文本框 -->
                        <input type="text" class="form-control col-3" id="tags" name="tags">
                    </div>
                    <!-- 文章摘要 -->
                    <div class="form-group">
                        <!-- 标签 -->
                        <label for="sumary">文章摘要</label>
                        <!-- 文本框 -->
                        <input type="text" class="form-control" id="sumary" name="sumary">
                    </div>
                    <!-- 文章正文 -->
                    <div class="form-group">
                        <label for="body">文章正文</label>
                        <!-- 文本区域 -->
                        <!--<textarea type="text" class="form-control" id="body" name="body" rows="12"></textarea>-->
                        <textarea cols="40" id="id_body" name="content" rows="10" required data-processed="0"
                                  :data-config="data_config" data-external-plugin-resources="[]" data-id="id_body"
                                  data-type="ckeditortype">
                        </textarea>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-primary">完成</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="py-3 bg-dark" id="footer">
        <div class="container">
            <h5 class="m-0 text-center text-white">Copyright @ qiruihua</h5>
        </div>
    </footer>
</div>
<!--ckeditor-->
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"
        data-ckeditor-basepath="{% static 'ckeditor/ckeditor/' %}" id="ckeditor-init-script"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<!-- 引入js -->
<script type="text/javascript" src="{% static 'js/host.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script type="text/javascript" src="{% static 'js/write_blog.js' %}"></script>
</body>

</html>